<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="js/rocket/rocket.css">

        <script language="javascript" src="js/rocket/json2.js"></script>
        
        <script language="javascript" src="js/jquery-1.6.1.min.js"></script>
        <script language="javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>

        <script src="js/bootstrap/js/bootstrap.js"></script>

        <script language="javascript" src="js/rocket/Element.js"></script>
        <script language="javascript" src="js/rocket/Request.js"></script>
        <script language="javascript" src="js/rocket/Button.js"></script>
        <script language="javascript" src="js/rocket/Input.js"></script>
        <script language="javascript" src="js/rocket/Container.js"></script>
        <script language="javascript" src="js/rocket/Grid.js"></script>

        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <style type="text/css">

            body{
                padding:20;
            }
            /*
            thead { display:block; margin:0px; cell-spacing:0px; left:0px; }
            thead {
                font-weight: normal;
                color:black;
                background-color: #FAFAFA;
            }
            thead th{
                background-color: #FAFAFA;
                border:none;
            }
            tbody { display:block; overflow:auto;}
            tbody tr{
                #height:10px;
            }
            th { width:100px; }
            td { width:100px; margin:0px; height:30px;
                 cellspacing:0px;
            }*/
            .highlightx{
                background-color: #E6EDF0;
            }
        </style>

        <script language="javascript">
            var content;
            var grid;
            $(document).ready(function(){
                grid = new Grid({
                    title:'Grilla Test',
                    renderTo:'grid',
                    remoteSort:true,
                    autoLoad:true,
                    rp:10,
                    url:'server.php',
                    width:'50%',
                    height:'300',
                    searchItems:[
                        {display:'Hola',field:'c1'},
                        {display:'Ciao',field:'c2'},
                        {display:'Bye',field:'c2'},
                        {display:'Sayunara',field:'c2'}
                    ],
                    columns:[
                        {display: 'Nombre',name: 'nombre'},
                        {display: 'Direccion',name: 'direccion'},
                        {display: 'Sector',name: 'sector_name'},
                        {display: 'SectorId',name: 'SectorId'},
                        {display: 'Ciudad',name: 'ciudad'}
                    ]
                });
                
                
                content = new Container({
                    renderTo:'div',
                    width:'50%',
                    title:'Datos de usuario',
                    layout:'vbox',
                    isForm:true,
                    modal:true,
                    items:[
                        {
                            type:'button',
                            Classes:['btn-mini'],
                            text:'Botón1',
                            handler:function(_this){
                                alert('me clickcaron!!!');
                            }
                            /*width:'100%'*/
                        },
                        {
                            type:'textfield',
                            placeHolder:'testtt',
                            label:'Nombre',
                            name:'name'/*,
                            renderTo:'texto'*/
                        },
                        {
                            type:'button',
                            text:'Botón2',
                            width:'35%',
                            handler:function(_this){
                                console.log(_this);
                            }
                        },
                        {
                            type:'container',
                            id:'container2_hbox',
                            title:'Contacto',
                            border:false,
                            layout:'vbox',
                            items:[
                                {
                                    type:'textfield',
                                    placeHolder:'Email',
                                    label:'E-mail',
                                    name:'email'
                                },{
                                    type:'textfield',
                                    placeHolder:'Ciudad',
                                    label:'Ciudad',
                                    name:'city'
                                }
                            ]
                        },
                        {
                            type:'container',
                            layout:'vbox',
                            border:false,
                            items:[
                                {
                                    type:'container',
                                    layout:'hbox',
                                    title:'Datos de Usuario',
                                    border:false,
                                    width:'50%',
                                    items:[
                                        {
                                            type:'textfield',
                                            placeHolder:'Email3',
                                            label:'E-mail2',
                                            name:'email'
                                        },{
                                            type:'textfield',
                                            placeHolder:'Ciudad3',
                                            label:'Ciudad2',
                                            name:'city'
                                        },{
                                            type:'button',
                                            btButtonClass:'btn-success',
                                            text:'El'
                                        },{
                                            type:'button',
                                            btButtonClass:'btn-danger',
                                            text:'La'
                                        },{
                                            type:'button',
                                            btButtonClass:'btn-primary',
                                            text:'Los'
                                        }
                                    ]
                                },
                                {
                                    type:'container',
                                    layout:'hbox',
                                    title:'Datos de Contacto',
                                    border:false,
                                    width:'50%',
                                    items:[
                                        {
                                            type:'textfield',
                                            placeHolder:'Email2',
                                            label:'E-mail2',
                                            name:'email'
                                        },{
                                            type:'textfield',
                                            placeHolder:'Ciudad2',
                                            label:'Ciudad2',
                                            name:'city'
                                        }
                                    ]
                                }
                            ]
                        }
                        
                        
                    ],
                    buttons:[
                        {
                            type:'button',
                            btButtonClass:'btn-success',
                            text:'Enviar',
                            handler:function(_this){
                                alert('enviando formulario');
                                console.log(_this)
                            }
                        },
                        {
                            type:'button',
                            text:'Cancelar'
                        }
                    ]
                });
                
                
                $(".modal").draggable({
                    handle: ".modal-header"
                })
                
                //evento click de cada row
                $('table tbody tr').click(function() {
                    $('table tbody tr').removeClass('highlightx');
                    $(this).addClass('highlightx');
                    var data = {};
                    jQuery.each($(this).find('td'), function(){
                        data[$(this).attr('abbr')] = $(this).text();
                    });
                    console.log(data)
                });
            });
            
            
        </script>
    </head>
    <body>
        <div id="grid">
            
        </div>
        <div id="texto" class="form-horizontal"></div>
        <div id="div" style="display:none;"></div>
        <table style="width:28.3%;" cellpadding="0" cellspacing="0" border="0" class="table table-bordered" id="example">
            <thead>
                <tr>
                    <th colspan="5" style="padding:15px;">
                        <span style="width:37%;float:left;font-weight: lighter;font-size: 14px;margin-top: 5px;">Geographic Data Sample</span>
                        <span style="float:right;">
                            <input style="margin:0;" type="text" class="input-small" placeholder="Search">
                            <select style="width:30px;margin-bottom: 0;" name="example_length" aria-controls="example">
                                <option value="10" selected="selected">Name</option>
                                <option value="25">Apellido</option>
                                <option value="50">Edad</option>
                                <option value="100">cITY</option>
                            </select>
                            <button class="btn"><i class="icon-search"></i></button>
                        </span>    
                    </th>
                </tr>
                <tr>
                    <th >Rendering engine <i class="icon-chevron-up"></i></th>
                    <th >Browser </th>
                    <th >Platform(s) </th>
                    <th >Engine version </th>
                    <th >CSS grade </th>

                </tr>
            </thead>
            <tbody style="height:400px;">
                <tr class="odd gradeX" id="RCK-1021">
                    <td abbr="name">Trident</td>
                    <td abbr="browser">Internet Explorer 4.0</td>
                    <td abbr="so">Win 95+</td>
                    <td abbr="number" class="center"> 4</td>
                    <td abbr="char" class="center">X</td>
                </tr>
                <tr class="even gradeC">
                    <td>Trident</td>
                    <td>Internet
                        Explorer 5.0</td>
                    <td>Win 95+</td>
                    <td class="center">5</td>
                    <td class="center">C</td>
                </tr>
                <tr class="odd gradeA">
                    <td>Trident</td>
                    <td>Internet
                        Explorer 5.5</td>
                    <td>Win 95+</td>
                    <td class="center">5.5</td>
                    <td class="center">A</td>
                </tr>
                <tr class="even gradeA">
                    <td>Trident</td>
                    <td>Internet
                        Explorer 6</td>
                    <td>Win 98+</td>
                    <td class="center">6</td>
                    <td class="center">A</td>
                </tr>
                <tr class="odd gradeA">
                    <td>Trident</td>
                    <td>Internet Explorer 7</td>
                    <td>Win XP SP2+</td>
                    <td class="center">7</td>
                    <td class="center">A</td>
                </tr>
                <tr class="even gradeA">
                    <td>Trident</td>
                    <td>AOL browser (AOL desktop)</td>
                    <td>Win XP</td>
                    <td class="center">6</td>
                    <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                    <td>Gecko</td>
                    <td>Firefox 1.0</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td class="center">1.7</td>
                    <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                    <td>Gecko</td>
                    <td>Firefox 1.5</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td class="center">1.8</td>
                    <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                    <td>Gecko</td>
                    <td>Firefox 2.0</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td class="center">1.8</td>
                    <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                    <td>Gecko</td>
                    <td>Firefox 3.0</td>
                    <td>Win 2k+ / OSX.3+</td>
                    <td class="center">1.9</td>
                    <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                    <td>Gecko</td>
                    <td>Camino 1.0</td>
                    <td>OSX.2+</td>
                    <td class="center">1.8</td>
                    <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                    <td>Gecko</td>
                    <td>Camino 1.5</td>
                    <td>OSX.3+</td>
                    <td class="center">1.8</td>
                    <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                    <td>Gecko</td>
                    <td>Netscape 7.2</td>
                    <td>Win 95+ / Mac OS 8.6-9.2</td>
                    <td class="center">1.7</td>
                    <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                    <td>Gecko</td>
                    <td>Netscape Browser 8</td>
                    <td>Win 98SE+</td>
                    <td class="center">1.7</td>
                    <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                    <td>Gecko</td>
                    <td>Netscape Navigator 9</td>
                    <td>Win 98+ / OSX.2+</td>
                    <td class="center">1.8</td>
                    <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                    <td>Gecko</td>
                    <td>Mozilla 1.0</td>
                    <td>Win 95+ / OSX.1+</td>
                    <td class="center">1</td>
                    <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                    <td>Gecko</td>
                    <td>Mozilla 1.1</td>
                    <td>Win 95+ / OSX.1+</td>
                    <td class="center">1.1</td>
                    <td class="center">A</td>
                </tr>

            </tbody>
            <tfoot style="background-color:#FAFAFA;">
                <tr>
                    <td colspan="5">
                        <div style="width:100px;float:left;margin:10px 0;">
                            <select style="width:100px;float:left;" size="1" name="example_length" aria-controls="example"><option value="10" selected="selected">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select>
                        </div>
                        <div style="float: lefT;margin-right: 10px;">
                            <button style="width:45px;" class="btn " type="button"><i class="icon-backward"></i></button>
                            <input style="width:30px;margin-top: 11px;text-align: center;" type="text" class="input-small" value="5"/>
                            <button style="width:45px;" class="btn " type="button"><i class="icon-forward"></i></button>
                        </div>
                        <button style="width:45px;margin-top: 11px;" class="btn " type="button"><i class="icon-refresh"></i></button>
                        <span class="label label-info">20 Registros de 278</span>
                    </td>
                </tr>
            </tfoot>
        </table>

<!--
        <div style="height:400px;width:100%;margin-bottom:20px;"><table class="table table-bordered datagrid datagrid-stretch-header"><thead>
                    <tr>
                        <th colspan="4">
                            <span class="datagrid-header-title">Geographic Data Sample</span>

                <div class="datagrid-header-left">

                </div>
                <div class="datagrid-header-right">
                    <div class="input-append search">
                        <input type="text" class="input-medium" placeholder="Search">
                        <button class="btn"><i class="icon-search"></i></button>
                    </div>
                </div>
                </th>
                </tr>
                <tr><th data-property="toponymName" class="sortable" style="width: 226px;">Name</th><th data-property="countrycode" class="sortable" style="width: 179px;">Country</th><th data-property="population" class="sortable" style="width: 234px;">Population</th><th data-property="fcodeName" class="sortable">Type</th></tr></thead></table>
            <div class="datagrid-stretch-wrapper" style="height: 250px;"><table id="MyGrid" class="table table-bordered datagrid">

                    <tbody><tr><td style="width: 226px;">Mexico City</td><td style="width: 179px;">MX</td><td style="width: 234px;">12294193</td><td>capital of a political entity</td></tr><tr><td>Manila</td><td>PH</td><td>10444527</td><td>capital of a political entity</td></tr><tr><td>Dhaka</td><td>BD</td><td>10356500</td><td>capital of a political entity</td></tr><tr><td>Seoul</td><td>KR</td><td>10349312</td><td>capital of a political entity</td></tr><tr><td>Jakarta</td><td>ID</td><td>8540121</td><td>capital of a political entity</td></tr><tr><td>Tokyo</td><td>JP</td><td>8336599</td><td>capital of a political entity</td></tr><tr><td>Taipei</td><td>TW</td><td>7871900</td><td>capital of a political entity</td></tr><tr><td>Beijing</td><td>CN</td><td>7480601</td><td>capital of a political entity</td></tr><tr><td>Bogotá</td><td>CO</td><td>7102602</td><td>capital of a political entity</td></tr><tr><td>Hong Kong</td><td>HK</td><td>7012738</td><td>capital of a political entity</td></tr></tbody>



                </table></div>
            <table class="table table-bordered datagrid datagrid-stretch-footer"><tfoot>
                    <tr>
                        <th colspan="4">
                <div class="datagrid-footer-left" style="visibility: visible;">
                    <div class="grid-controls">
                        <span><span class="grid-start">1</span> - <span class="grid-end">10</span> of <span class="grid-count">146 items</span></span>
                        <select class="grid-pagesize">
                            <option>10</option>
                            <option>20</option>
                            <option>50</option>
                            <option>100</option>
                        </select>
                        <span>Per Page</span>
                    </div>
                </div>
                <div class="datagrid-footer-right" style="visibility: visible;">
                    <div class="grid-pager">
                        <button class="btn grid-prevpage" disabled="disabled"><i class="icon-chevron-left"></i></button>
                        <span>Page</span>

                        <div class="input-append dropdown combobox">
                            <input class="span1" type="text">
                            <button class="btn" data-toggle="dropdown"><i class="caret"></i></button>
                            <ul class="dropdown-menu"><li><a>1</a></li><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li><li><a>5</a></li><li><a>6</a></li><li><a>7</a></li><li><a>8</a></li><li><a>9</a></li><li><a>10</a></li><li><a>11</a></li><li><a>12</a></li><li><a>13</a></li><li><a>14</a></li><li><a>15</a></li></ul>
                        </div>
                        <span>of <span class="grid-pages">15</span></span>
                        <button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
                    </div>
                </div>
                </th>
                </tr>
                </tfoot></table></div>
-->
    </body>
</html>